<template>
  <span :class="getTagClass" v-if="getShowTag">{{ getContent }}</span>
</template>
<script lang="ts" setup>
  import type { Menu } from '@/router/types'
  import { computed } from 'vue'
  import { useDesign } from '@/hooks/web/useDesign'
  import { propTypes } from '@/utils/propTypes'

  defineOptions({ name: 'SimpleMenuTag' })

  const props = defineProps({
    item: {
      type: Object as PropType<Menu>,
      default: () => ({}),
    },
    dot: propTypes.bool,
    collapseParent: propTypes.bool,
  })

  const { prefixCls } = useDesign('simple-menu')

  const getShowTag = computed(() => {
    const { item } = props

    if (!item) return false

    const { tag } = item
    if (!tag) return false

    const { dot, content } = tag
    if (!dot && !content) return false
    return true
  })

  const getContent = computed(() => {
    if (!getShowTag.value) return ''
    const { item, collapseParent } = props
    const { tag } = item
    const { dot, content } = tag!
    return dot || collapseParent ? '' : content
  })

  const getTagClass = computed(() => {
    const { item, collapseParent } = props
    const { tag = {} } = item || {}
    const { dot, type = 'error' } = tag
    const tagCls = `${prefixCls}-tag`
    return [
      tagCls,

      [`${tagCls}--${type}`],
      {
        [`${tagCls}--collapse`]: collapseParent,
        [`${tagCls}--dot`]: dot || props.dot,
      },
    ]
  })
</script>
